const customTags = ['if', 'for']
const reg_single_bracket = /\{(.*?)\}/g
const reg_double_bracket = /\{\{(.*?)\}\}/g


export function complieTemplate(template, data) {
  template = replaceVar(template, data, reg_double_bracket)
  const _node = document.createElement('div')
  _node.innerHTML = template

  console.log(compileNode(_node, data))

  return compileNode(_node, data)
}

function replaceNode(node, tag, data) {
  const dataKey = node.getAttribute('data')
  const className = node.className
  const realTag = node.getAttribute('tag')

  switch (tag) {
    case 'for': {
      vFor(node, data, dataKey, className, realTag)
      break;
    }
    default:
      break;
  }
}

function compileNode(node, data) {
  const allNode = node.querySelectorAll('*')

  allNode.forEach(item => {
    const tagName = item.tagName.toLowerCase()

    if (customTags.includes(tagName)) {
      replaceNode(item, tagName, data)
    }
  })

  return [...node.childNodes].find(item => item.nodeType === 1)
}

function vFor(node, data, dataKey, className, realTag) {

  const oFrag = document.createDocumentFragment()

  data[dataKey].forEach(item => {
    const el = document.createElement(realTag)
    el.className = className || ''
    el.innerHTML = replaceVar(node.innerHTML, item, reg_single_bracket)

    oFrag.appendChild(el)
  })

  node.parentNode.replaceChild(oFrag, node)
}

/**
 * 替换数据 双大括号 | 单大括号
 */
function replaceVar(html, data, reg) {
  return html.replace(reg, (node, key) => {
    const obj = {}
    key = key.trim()
    return obj[key] = data[key]
  })
}

